<template>
  <div>
    <el-form-item label="选项: ">
      <!-- 单选框部分 -->
      <el-radio-group v-if="showWitch === '1'" v-model="radio">
        <el-row
          v-for="item in dataList"
          :key="item.code"
          type="flex"
          align="middle"
        >
          <!-- 单选部分 -->
          <el-radio :label="item.code">{{ `${item.code}：` }}</el-radio>
          <!-- 输入框部分 -->
          <el-input v-model="item.title" placeholder="请输入选项" />
          <!-- 上传部分 -->
          <el-upload v-show="!witchUpdata.includes(item.code)" action="#" list-type="picture-card">
            <i>上传图片</i>
            <span class="close">
              <i
                class="el-icon-circle-close"
                @click.stop="closeUploadFn(item.code)"
              />
            </span>
          </el-upload>
        </el-row>
      </el-radio-group>

      <!--复选框部分 -->
      <div v-if="showWitch === '2'">
        <el-row
          v-for="item in dataList"
          :key="item.code"
          type="flex"
          align="middle"
        >
          <!-- 复选框部分 -->
          <el-checkbox v-model="item.isRight" :label="item.isRight">{{
            `${item.code}：`
          }}</el-checkbox>
          <!-- 输入框部分 -->
          <el-input v-model="item.title" placeholder="请输入选项" />
          <!-- 上传部分 -->
          <el-upload v-show="!witchUpdata.includes(item.code)" action="#" list-type="picture-card">
            <i>上传图片</i>
            <span class="close">
              <i
                class="el-icon-circle-close"
                @click.stop="closeUploadFn(item.code)"
              />
            </span>
          </el-upload>
        </el-row>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'Check',
  props: {
    // 父级传入的check
    value: {
      type: [String, Boolean],
      required: true
    },
    // 通过问题状态码,判断显示多选还是单选
    showWitch: {
      type: String,
      required: true
    },
    // 父级传入的用于页面渲染的值
    dataList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      witchUpdata: []
    }
  },
  computed: {
    // 双向绑定radio,将组件内的radio绑定到父级的check上
    radio: {
      set(val) {
        this.$emit('input', val)
      },
      get() {
        return this.value
      }
    }
  },
  methods: {
    // 点击关闭上传框
    closeUploadFn(val) {
      this.witchUpdata.push(val)
    }
  }
}
</script>

<style lang="scss" scoped>
// 每个row之间间距20px
::v-deep .el-row.is-align-middle.el-row--flex {
  margin-bottom: 20px;
}
// radio组件右边距
::v-deep label.el-radio {
  margin-right: 0px;
}
//input组件宽高边距
::v-deep .el-input.el-input--medium {
  width: 240px;
  margin-right: 3px;
  input.el-input__inner {
    width: 240px;
    height: 36px;
    margin-right: 3px;
  }
}

::v-deep .el-upload.el-upload--picture-card {
  position: relative;
  width: 100px;
  height: 60px;
}
::v-deep .el-upload--picture-card {
  line-height: 60px;
}
::v-deep .el-upload--picture-card i {
  font-size: 14px;
  color: #303133;
  font-style: normal;
}
::v-deep span.close {
  position: absolute;
  width: 18px;
  height: 18px;
  top: -24px;
  right: -8px;
  .el-icon-circle-close {
    font-size: 18px;
    color: #999999;
  }
}
// 修改上传框关闭按钮背景色
::v-deep i.el-icon-circle-close {
  background-color: #fff;
}
</style>>
